<template>
  <div id="community">
    <div class="all-community" v-if="!isSend" ref="wrapper">
      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{pulldownMsg}}</span>
        </div>
        <!-- 内容列表 -->
        <div class="content">
          <div class="incident-item" v-for="(item,index) in  showFilmList" :key="index">
            <div class="top-info">
              <div class="left">
                <div class="logo">
                  <img :src="item.avatar" alt />
                </div>
              </div>
              <div class="right">
                <h3 class="name">{{item.nickname}}</h3>
                <p class="desc">{{item.content}}</p>
                <ul class="img-wrap">
                  <template v-for="(img, imgIndex) in item.files">
                    <li>
                      <!-- <div
                        class="img"
                        :style="`background: url(${img}) center no-repeat; background-size:cover;`"
                      ></div> -->
                        <img
                          class="img"
                          :src="img"
                          alt="i业主"
                          :key="imgIndex"
                          :preview="imgIndex"
                          preview-text
                        />
                    </li>
                  </template>
                </ul>
              </div>
            </div>
            <!-- 图片信息以下 -->
            <div class="bottom-info">
              <!-- 地址 时间 评论按钮 -->
              <div class="operation-block">
                <div class="other-info">
                  <p>{{item.position}}</p>
                  <p>{{item.createtime}}</p>
                </div>
                <div class="op">
                  <div class="more-btn" @click="showComment(index)"></div>
                  <!-- <div class="dispose-btn" v-if="0">
                  <span>完成</span>
                  <span>处理</span>
                  </div>-->
                  <div class="discuss" v-if="commentBtn == index" @click="communitLayer(item.id)">
                    <i></i>
                    评论
                  </div>
                </div>
              </div>
              <!-- 评论内容 -->
              <div class="discuss-list" v-if="item.comment.length != 0">
                <div
                  class="discuss-item work"
                  v-for="(comItem,comIndex) in item.comment"
                  :key="comIndex"
                >
                  <strong>{{comItem.nickname}}<i v-if="comItem.group_name != '' && comItem.group_name != null">（{{comItem.group_name}}）</i> :</strong>
                  {{comItem.comment_detai}}
                  <span>{{comItem.createtime}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部提示信息 -->
        <div class="bottom-tip">
          <span class="loading-hook">{{pullupMsg}}</span>
        </div>
      </div>
    </div>
    <!-- 发布动态 -->
    <div class="add-community" v-if="isSend">
      <div class="textarear-block">
        <textarea v-model="content" name autofocus placeholder="这一刻的想法"></textarea>
      </div>
      <ul class="image-reader-list">
        <li
          class="image-reader-item"
          v-for="(img, index) in imageList"
          :key="index"
          :style="{
          'backgroundImage': `url(${img})`,
          'backgroundPosition': 'center center',
          'backgroundRepeat': 'no-repeat',
          'backgroundSize': 'cover'
        }"
        >
          <md-tag
            class="image-reader-item-del"
            size="small"
            shape="quarter"
            fill-color="#111A34"
            type="fill"
            font-color="#fff"
            @click.native="onDeleteImage('reader', index)"
          >
            <md-icon name="close"></md-icon>
          </md-tag>
        </li>
        <li class="image-reader-item add" v-if="this.imageList.length < 9 ">
          <md-image-reader
            name="reader"
            @select="onReaderSelect"
            @complete="onReaderComplete"
            @error="onReaderError"
            :is-multiple="true"
            :amount="9"
          ></md-image-reader>
          <md-icon name="camera" size="lg" color="#b8b8b8"></md-icon>
          <p>添加图片</p>
        </li>
      </ul>
      <!-- 地点 提醒谁看 谁可以看 -->
      <div class="footer-block">
        <div class="item">
          <i class="address-icon"></i>
          <md-input-item v-model="position" title="位置" align="right" placeholder="示例位置-例：2号楼4层"></md-input-item>
        </div>
        <!-- <div class="item">
          <i class="mail-icon"></i>
          <md-field-item
            class="inner-item"
            title="提醒谁看"
            :content="selectorValue"
            @click="showSelector"
            arrow="arrow-right"
            align="right"
          />
        </div> -->
        <!-- <div class="item">
          <i class="person-icon"></i>
          <md-check v-model="checked" label="是否仅自己和处理人可看？" />
        </div> -->
      </div>
      <div class="commit-btn">
        <md-button type="primary" @click="sendFilm" round size="small">提交发布</md-button>
      </div>
    </div>
    <!--图片查看  -->
    <md-image-viewer
      v-model="isViewerShow"
      :list="imgs"
      :has-dots="true"
      :initial-index="viewerIndex"
    ></md-image-viewer>
    <!-- 发布 个人/全部切换按钮 -->
    <div class="fixed-btn" v-if="!isSend">
      <div class="send">
        <md-image-reader
          class="sel-img-btn"
          name="reader"
          @select="onReaderSelect"
          @complete="onReaderComplete"
          @error="onReaderError"
        ></md-image-reader>
        <i></i>
        <span>发布</span>
      </div>
      <div class="my" v-if="isAll" @click="changeDynamic">
        <i></i>
        <span>我的</span>
      </div>
      <div class="all" v-if="!isAll" @click="changeDynamic">
        <i></i>
        <span>全部</span>
      </div>
    </div>
    <!-- 提醒谁看选择器 -->
    <md-selector
      v-model="isSelectorShow"
      default-value
      :data="selectorList"
      max-height="320px"
      title="提醒谁看"
      @choose="onSelectorChoose"
    ></md-selector>
    <!-- 评论输入框 -->
    <div class="communit-layer" v-show="showCommunitLayer">
      <input type="text" v-model="communitContent" autofocus />
      <span @click="sendCommunit">发送</span>
    </div>
    <!-- 底部tab -->
    <tabBar class="tab-bar" :currentIndex="currentIndex"></tabBar>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import tabBar from "@/components/common/tabBar";
import imageProcessor from "mand-mobile/components/image-reader/image-processor"; //图片压缩
import https from "@/https";
import config from "@/config";
import {
  ImageReader,
  Icon,
  Tag,
  Toast,
  ImageViewer,
  Selector,
  // Field,
  InputItem,
  Button,
  Check,
  FieldItem,
  Dialog
} from "mand-mobile";
export default {
  components: {
    tabBar,
    [Icon.name]: Icon,
    [Tag.name]: Tag,
    [ImageViewer.name]: ImageViewer,
    [ImageReader.name]: ImageReader,
    [Selector.name]: Selector,
    // [Field.name]: Field,
    [InputItem.name]: InputItem,
    [Check.name]: Check,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [FieldItem.name]: FieldItem
  },
  name: "my",
  data() {
    return {
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",

      screenHeight: document.body.clientHeight, // 这里是给到了一个默认值 （这个很重要），
      originHeight: document.body.clientHeight, //默认高度在watch里拿来做比较
      isOriginHei: true,

      currentIndex: 3, //tabbar 值
      content: "",
      position: "", //定位
      imageList: [], //发布图片列表
      checked: false, //是否自己和处理人看
      noticed: "", //提醒人id
      isSend: false, //是否发布
      isSelectorShow: false, //是否显示提醒选择框
      selectorValue: "", //提醒人名称值
      selectorList: [], //提醒人列表数据 text,value

      showFilmList: {}, //显示的内容
      myFilmList: {}, //我的胶卷信息
      isAll: true, //是否全部动态
      isViewerShow: false, //是否显示图片查看
      viewerIndex: 0, //查看图片的index

      imgs: [], //大图预览图列表
      commentBtn: -1, //显示评论按钮对应值
      showCommunitLayer: false, //是否显示评论输入框
      communitId: "", //评论的文章id
      communitContent: "", //评论的内容
      myPage: 1, //我的页码
      allPage: 1 //全部页码
    };
  },
  watch: {
    imageList: {
      handler(val, oldval) {
        if (this.imageList.length > 9) {
          this.imageList = this.imageList.slice(0, 9);
        }
      },
      deep: true //对
    }
    // screenHeight(val) {
    //   if (this.originHeight != val) {
    //     this.isOriginHei = false;
    //   } else {
    //     this.isOriginHei = true;
    //   }
    // }
  },
  computed: {
    mobile() {
      return this.$store.getters.getUserInfo.mobile;
    }
  },
  methods: {
    // 胶卷列表
    filmList() {
      let params = {};
      let url = "";
      if (this.isAll) {
        params = {
          qid: this.$store.state.residentialType.qid,
          pn: 1,
          pagesize: 10
        };
        url = config.fileList;
      } else {
        params = {
          qid: this.$store.state.residentialType.qid,
          mobile: this.mobile,
          pn: 1,
          pagesize: 10
        };
        url = config.myFileList;
      }
      https
        .fetchPost(url, params)
        .then(res => {
          if (res.data.code == 1) {
            let info = res.data.data;
            info.forEach(item => {
              if (item.files) {
                item.files = item.files.split(",");
              }
              item.createtime = this.dataFormat(item.createtime * 1000);
              item.comment.forEach(element => {
                element.createtime = this.dataFormat(element.createtime * 1000);
              });
            });
            this.showFilmList = info;
            this.myPage = 1;
            this.allPage = 1;
            this.$previewRefresh();
            //恢复刷新提示文本值
            this.pulldownMsg = "下拉刷新";
            //刷新列表后，重新计算滚动区域高度
            this.scroll.refresh();
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 加载更多
    moreFilmList() {
      let params = {};
      let url = "";
      if (this.isAll) {
        let pn = this.allPage + 1;
        params = {
          pn,
          pagesize: 10
        };
        url = config.fileList;
      } else {
        let pn = this.myPage + 1;
        params = {
          mobile: this.mobile,
          pn,
          pagesize: 10
        };
        url = config.myFileList;
      }
      https
        .fetchPost(url, params)
        .then(res => {
          if (res.data.code == 1) {
            let newList = res.data.data;
            if (newList.length != 0) {
              newList.forEach(item => {
                if (item.files) {
                  item.files = item.files.split(",");
                }
                item.createtime = this.dataFormat(item.createtime * 1000);
                item.comment.forEach(element => {
                  element.createtime = this.dataFormat(
                    element.createtime * 1000
                  );
                });
              });
              let oldList = this.showFilmList;
              let info = oldList.concat(newList);
              this.showFilmList = info;
              if (this.isAll) {
                this.allPage = params.pn;
              } else {
                this.myPage = params.pn;
              }
              this.$previewRefresh();
              //恢复文本值
              this.pullupMsg = "加载更多";
              this.scroll.refresh();
            } else {
              Toast.failed("没有更多咯");
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 发朋友圈
    sendFilm() {
      let mobile = this.mobile;
      let content = this.content;
      if (content == "") {
        Toast.failed("请先填写发布内容");
        return;
      }
      let files = this.imageList.join(",");
      let position = this.position;
      let is_self = this.checked * 1;
      let noticed = this.noticed;
      let params = {
        mobile,
        qid: this.$store.state.residentialType.qid,
        uid: this.$store.state.userInfo.id,
        content,
        files,
        position,
        is_self,
        noticed
      };
      https
        .fetchPost(config.sendFilm, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.succeed(res.data.msg);
            setTimeout(() => {
              this.content = "";
              this.position = ""; //定位
              this.imageList = []; //发布图片列表
              this.checked = false; //是否自己和处理人看
              this.noticed = ""; //提醒人id
              this.filmList();
              this.isSend = false;
            }, 2000);
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取提醒列表
    nociteList() {
      let params = {
        mobile: this.mobile
      };
      https
        .fetchPost(config.nociteList, params)
        .then(res => {
          if (res.data.code == 1) {
            let list = res.data.data;
            let arr = [];
            if (list.length != 0) {
              list.forEach(item => {
                let obj = {
                  text: item.username,
                  value: item.id
                };
                arr.push(obj);
              });
              this.selectorList = arr;
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 大图查看
    showViewer(index, imgIndex) {
      this.imgs = this.showFilmList[index].files;
      this.viewerIndex = imgIndex;
      this.isViewerShow = true;
    },
    // 64图转url
    saveBase64Image(dataUrl, callBack) {
      let params = {
        image: dataUrl
      };
      https
        .fetchPost(config.base64Image, params)
        .then(res => {
          callBack(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 切换个人或全部动态
    changeDynamic() {
      let isAll = this.isAll;
      if (isAll) {
        this.isAll = false;
      } else {
        this.isAll = true;
      }
      this.filmList();
      window.scrollTo(0, 0);
    },
    // 选照片
    onReaderSelect() {
      Toast.loading("图片读取中...");
      this.nociteList();
    },
    onReaderComplete(name, { dataUrl }) {
      let _this = this;
      imageProcessor({
        dataUrl,
        width: 900,
        quality: 0.6
      }).then(({ dataUrl }) => {
        let callBack = function(res) {
          if (res.data.code == 1) {
            let imageList = _this.imageList;
            imageList.push(res.data.data.url);
            _this.imageList = imageList;
            Toast.hide();
          } else {
            Toast.hide();
            Toast.failed("图片上传失败，请重试");
          }
        };
        this.saveBase64Image(dataUrl, callBack);
      });
      this.isSend = true;
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    // 删除图片
    onDeleteImage(name, index) {
      let imageList = this.imageList;
      imageList.splice(index, 1);
      this.imageList = imageList;
    },
    // 打开提醒选择器
    showSelector() {
      this.isSelectorShow = true;
    },
    // 选中提醒谁看
    onSelectorChoose({ text, value }) {
      this.selectorValue = text;
      this.noticed = value;
    },
    // 显示对应的评论按钮
    showComment(index) {
      this.commentBtn = index;
    },
    // 时间戳转换
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d;
      }
    },
    // 滚动关闭评论按钮
    closeComment() {
      this.commentBtn = -1;
      this.showCommunitLayer = false;
      this.communitId = "";
      this.communitContent = "";
    },
    // 显示评论你输入框
    communitLayer(id) {
      this.showCommunitLayer = true;
      this.communitId = id;
      this.commentBtn = -1; //显示评论按钮对应值
    },
    // 发送评论
    sendCommunit() {
      let mobile = this.mobile;
      let id = this.communitId;
      let content = this.communitContent;
      if (content == "") {
        Toast.failed("请输入发送内容");
        return;
      }
      let params = {
        mobile,
        content,
        id,
        rid: this.$store.state.roleType.rid,
      };
      https
        .fetchPost(config.comment, params)
        .then(res => {
          if (res.data.code == 1) {
            this.showCommunitLayer = false;
            this.communitId = "";
            this.communitContent = "";
            this.filmList();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
  created() {
    this.filmList();
    const that = this;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        //初始化better-scroll
        probeType: 1, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true //是否派发click事件
      });
      // 滑动过程中事件
      this.scroll.on("scroll", pos => {
        this.closeComment();
        if (pos.y > 30) {
          this.pulldownMsg = "释放立即刷新";
        }
      });
      //滑动结束松开事件
      this.scroll.on("touchEnd", pos => {
        //上拉刷新
        if (pos.y > 30) {
          this.filmList();
        } else if (pos.y < this.scroll.maxScrollY - 30) {
          //下拉加载
          this.pullupMsg = "加载中。。。";
          this.moreFilmList();
        }
      });
    });
  },
  mounted() {
    // const that = this;
    // window.onresize = () => {
    //   return (() => {
    //     window.screenHeight = document.body.clientHeight;
    //     that.screenHeight = window.screenHeight;
    //   })();
    // };
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.pswp {
  z-index: 99;
}
#community {
  .tab-bar {
    position: fixed;
    z-index: 1;
    background: #fff;
  }
  .all-community {
    height: 100vh;
    .bscroll-container {
      padding-bottom: 100px;
    }
    .incident-item {
      padding: 30px 20px 40px;
      border-bottom: 1px solid #dedede;
      .top-info {
        display: flex;
        .left {
          position: relative;
          width: 120px;
          .logo {
            display: flex;
            justify-content: center;
            width: 90px;
            height: 90px;
            border-radius: 12px;
            overflow: hidden;
            img {
              height: 90px;
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          .name {
            font-size: 30px;
            color: #64768f;
            line-height: 48px;
            margin-bottom: 10px;
          }
          .desc {
            font-size: 28px;
            color: #444;
            line-height: 42px;
            width: 590px;
          }
          .img-wrap {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            width: 590px;
            li {
              position: relative;
              width: 31%;
              padding-bottom: 31%;
              margin-left: 2%;
              margin-top: 2%;
              border-sizing: border-box;
              border-radius: 2px;
              overflow: hidden;
              list-style: none;
              .img {
                position: absolute;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      .bottom-info {
        margin-top: 20px;
        .operation-block {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 120px;
          .other-info {
            font-size: 22px;
            color: #777;
            p {
              line-height: 40px;
            }
          }
          .op {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 70px;
            .more-btn {
              width: 50px;
              height: 32px;
              border-radius: 4px;
              background: #f8f8f8 url("/../static/images/community/more.png")
                center no-repeat;
              background-size: 32px 32px;
            }
            .dispose-btn {
              position: absolute;
              left: -260px;
              background: #363636;
              color: #fff;
              display: flex;
              width: 240px;
              border-radius: 8px;
              z-index: 98;
              span {
                display: flex;
                align-items: center;
                width: 50%;
                justify-content: center;
                height: 70px;
                font-size: 22px;
                &:last-child {
                  &::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 20px;
                    display: block;
                    border-left: 1px solid #fff;
                    width: 0;
                    height: 30px;
                  }
                }
              }
              &:after {
                position: absolute;
                right: -12px;
                display: block;
                top: 20px;
                content: "";
                border-left: 12px solid #363636;
                border-top: 12px solid #fff;
                border-bottom: 12px solid #fff;
              }
            }
            .discuss {
              position: absolute;
              left: -160px;
              background: #363636;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              display: flex;
              width: 140px;
              height: 70px;
              font-size: 22px;
              border-radius: 8px;
              z-index: 98;
              i {
                width: 32px;
                height: 32px;
                background: url("/../static/images/community/discuss.png")
                  center no-repeat;
                background-size: 32px 32px;
                margin-right: 10px;
              }
              &:after {
                position: absolute;
                right: -12px;
                display: block;
                top: 20px;
                content: "";
                border-left: 12px solid #363636;
                border-top: 12px solid #fff;
                border-bottom: 12px solid #fff;
              }
            }
          }
        }
        // 评论列表
        .discuss-list {
          margin-left: 120px;
          background: #f8f8f8;
          font-size: 28px;
          color: #555;
          margin-top: 20px;
          border-radius: 10px;
          .discuss-item {
            line-height: 40px;
            padding: 10px;
            strong {
              color: #64768f;
              font-weight: 600;
              margin-right: 10px;
            }
            span {
              font-size: 24px;
              color: #999;
              margin-left: 15px;
            }
            &.work {
              // background: $themeGold;
              color: #333;
              border-radius: 10px;
              strong {
                color: #1a365e;
              }
              span {
                color: #666;
              }
            }
          }
        }
      }
    }
  }
  .fixed-btn {
    position: fixed;
    right: 20px;
    bottom: 300px;
    display: flex;
    flex-direction: column;
    .send,
    .my,
    .all {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: $themeColor;
      color: #fff;
      font-size: 24px;
      margin-bottom: 15px;
      i {
        width: 36px;
        height: 36px;
        margin-bottom: 4px;
      }
      span {
        margin-bottom: 4px;
      }
    }
    .send {
      position: relative;
      .sel-img-btn {
        position: absolute;
      }
      i {
        background: url("/../static/images/community/send.png") no-repeat;
        background-size: 100%;
      }
    }
    .my,
    .all {
      i {
        background: url("/../static/images/community/dynamic.png") no-repeat;
        background-size: 100%;
      }
    }
  }
  .add-community {
    padding: 30px 30px 0;
    .textarear-block {
      textarea {
        width: 100%;
        height: 200px;
        margin-bottom: 10px;
        border: none;
        resize: none;
        outline: none;
        font-size: 28px;
        line-height: 40px;
      }
    }
    .image-reader-list {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .image-reader-item {
        position: relative;
        width: 32%;
        padding-bottom: 32%;
        margin-bottom: 2%;
        margin-right: 2%;
        background: #fff;
        // box-shadow: 0 5px 20px rgba(197, 202, 213, 0.25);
        box-sizing: border-box;
        list-style: none;
        border-radius: 4px;
        background-size: cover;
        &:nth-of-type(3n) {
          margin-right: 0;
        }
        &.add {
          background: #f3f3f3;
          .md-icon {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.5;
          }
          p {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            margin-top: 15px;
            font-size: 22px;
            color: #b8b8b8;
            text-align: center;
          }
        }
        .image-reader-item-del {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 3;
          opacity: 0.8;
          .md-icon-close {
            font-size: 24px;
          }
        }
      }
      &:after {
        display: block;
        clear: both;
      }
    }
    .footer-block {
      margin-top: 30px;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      .item {
        display: flex;
        align-items: center;
        i {
          width: 60px;
          height: 60px;
          padding: 20px 20px;
          &.mail-icon {
            background: url("/../static/images/community/mail.png") no-repeat
              center center;
            background-size: 32px 32px;
          }
          &.address-icon {
            background: url("/../static/images/community/address.png") no-repeat
              center center;
            background-size: 32px 32px;
          }
          &.person-icon {
            background: url("/../static/images/community/person.png") no-repeat
              center center;
            background-size: 32px 32px;
          }
        }
        .inner-item {
          width: 590px;
        }
      }
    }
    .commit-btn {
      padding: 60px 200px 170px;
    }
  }
  .communit-layer {
    position: absolute;
    bottom: 110px;
    width: 100%;
    height: 80px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #ccc;
    z-index: 50;
    input {
      outline: none;
      width: 540px;
      height: 60px;
      border: none;
      border-radius: 8px;
      padding: 0 20px;
      background: #fff;
    }
    span {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: #2f86f6;
      font-size: 26px;
      margin-left: 20px;
      border-radius: 8px;
      width: 120px;
      height: 60px;
    }
  }
  .top-tip {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    text-align: center;
    color: #ccc;
  }
  .bottom-tip {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #999;
    font-size: 28px;
    position: absolute;
    bottom: 35px;
    left: 0;
  }
}
</style>
